<!--
 * @Description: 网元配置备份设置
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:29:53
 * @LastEditTime: 2021-09-28 10:53:02
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <div class="info">
      <!-- 网元配置备份 -->
      <h1 class="title">{{$t('systerms.NetworkElementBackup')}}</h1>
      <el-form
        :model="form"
        class="form"
        :rules="rules"
        ref="ruleForm"
        :label-width="labelWidth"
        label-position="right"
      >
        <!-- 备份数据 -->
        <el-form-item :label="$t('systerms.BackupData')">
          <!-- 执行 -->
          <el-button @click="backups">{{$t('systerms.Immediately')}}</el-button>
        </el-form-item>
        <!-- 定时备份 -->
        <el-form-item :label="$t('systerms.ScheduledBackup')" prop="time">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-time-picker v-model="form.time" :disabled="!isEdit"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 90px"
            @click="edit"
          >{{isEdit ? $t('systerms.Save') : $t('systerms.Edit')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isEdit: false,
      form: {
        time: null
      }
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.backupsConfig();
    });
  },
  computed: {
    labelWidth () {
      let currentLang = this.$i18n.locale;
      let temp = 80;
      if (currentLang === 'cn') {
        temp = 80;
      } else {
        temp = 140;
      }
      return temp + 'px';
    },
    rules () {
      return {
        time: [
          { required: true, message: this.$t('systerms.PlaceholderByAnyTime'), trigger: 'change' }
        ]
      };
    }
  },
  methods: {
    backupsConfig () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/setting/timebackup/query'
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          if (resultBody.length > 0) {
            _this.form = {
              time: resultBody[0].excuteTime
            };
          } else {
            _this.form = {
              time: null
            };
          }
        }
      });
    },
    backups () {
      let _this = this;
      _this.$http.put({
        url: '/api/sdwan/setting/timebackup/write'
      }).then(res => {
        let { status } = res;
        if (status === '0') {
          _this.$message.success(this.$t('systerms.ExecutionSuccessful'));
        }
      });
    },
    edit () {
      let _this = this;
      if (_this.isEdit) {
        _this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            _this.isEdit = !_this.isEdit;
            let params = {
              autoWrite: true,
              excuteTime: _this.form.time.toString(),
              targetPeriod: 'EVERYDAY'
            };
            _this.$http.put({
              url: '/api/sdwan/setting/timebackup/schedule',
              data: params
            }).then(res => {
              let { status } = res;
              if (status === '0') {
                _this.$message.success(this.$t('systerms.SetSuccessful'));
                _this.backupsConfig();
              }
            });
          } else {
            _this.$message.error(this.$t('systerms.CheckRequired'));
          }
        });
      } else {
        _this.isEdit = !_this.isEdit;
      }
    }
  },
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;

  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .page-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>